<template>
    <el-scrollbar height="2000px" @scroll="scrolllength">

        <div class="san">
            <div class="fl">
                <van-dropdown-menu active-color="red">

                    <van-dropdown-item title="分类" ref="itemRef" class="first-zj">
                        <!-- <van-cell center title="包邮">
                        <template #right-icon>
                            <van-switch v-model="switch1" />
                        </template>
                    </van-cell> -->

                        <van-cell center :title="item"
                            style=" width: 50px; height: 40px; font-size: 10px; padding: 0; text-align: center;"
                            v-for="(item, index) in tags" :key="index">
                        </van-cell>



                        <!-- <div style="padding: 5px 16px;">
                        <van-button type="primary" block round @click="onConfirm">
                            确认
                        </van-button>
                    </div> -->
                    </van-dropdown-item>

                    <van-dropdown-item title="排列方式" v-model="value1" :options="option1" />
                    <van-dropdown-item title="是否付费" v-model="value2" :options="option2" />
                </van-dropdown-menu>
            </div>
        </div>

        <contentList :list="albumViews" :isShow=1></contentList>

    </el-scrollbar>
</template>

<script setup lang="ts">
import contentList from '@/components/contentList/index.vue'

//获取数据
import reqApi from '@/api/search/index'
import { useRoute } from 'vue-router';
const route = useRoute()
const albumViews = ref<any[]>([])
const tags = ref<any>([])
import { ref, onMounted } from 'vue'
let num = ref(1)

const dd = async (shuru: any, number: number) => {
    console.log('222')
    let result = await reqApi.reqTagList4(shuru, 'all', number, 5)
    console.log('dd', result.data);
    // SearchStore.data = result.data
    console.log('SearchStore-qb', result.data)
    if(number === 1) {

        albumViews.value = result.data.albumViews.albums
    }else{
        albumViews.value = albumViews.value.concat(result.data.albumViews.albums)
    }
    // tags.value = albumViews.value.albums[0].albumInfo.tags.split(',')
    console.log('tags', tags.value[0])
    // category.value = result.category
}

const scrolllength = (scrolllength: any) => {

    if (scrolllength.scrollTop === num.value * 320) {
        num.value++
        dd(route.query.name, num.value)
    }
    console.log('scrolllength', scrolllength.scrollTop)

}

onMounted(() => {
    dd(route.query.name, num.value)
})

//筛选
// const shaixuan1 = (e: any) => {
//     console.log('e', e)
//     albumViews.value.albums = albumViews.value.albums.some(item: => item.pageUriInfo.categoryName == e)
// }

// const shaixuanmore = (tj1: string) => {
//     // console.log('tj1', tj1)

//     for (var i = 0; i < albumViews.value.albums.length - 1; i++) {
//         for (var j = 0; j < albumViews.value.albums.length - i - 1; j++) {
//             if (albumViews.value[j].albumInfo.tj1 > albumViews.value.[j + 1].albumInfo.tj1) {//想要从大到小，只需把arr[j] < arr[j + 1] 即可
//                 var temp = albumViews.value.albums[j];
//                 albumViews.value.albums[j] = albumViews.value.albums[j + 1];
//                 albumViews.value.albums[j + 1] = temp;
//             }
//         }
//     }
//     console.log(albumViews.value.albums);
// }

// const shaixuan2 = (or: number) => {
//     console.log('1or2', or)
//     let tj = ref('')
//     if(or === 0) {
//         tj.value = 'count_comment'
//     }else if(or === 1 ){
//         tj.value = 'play'
//     }else{
//         tj.value = 'created_at'
//     }
//     shaixuanmore(tj.value)


//     // albumViews.value.albums = albumViews.value.albums.some(item => item.pageUriInfo.categoryId == 6)
// }

// const shaixuan3 = (num: any) => {
//     console.log('num', num)
//     albumViews.value.albums = albumViews.value.filter(item => item.pageUriInfo.categoryId == num)
// }

const value1 = ref(0);
const value2 = ref('a');
const option1 = [
    { text: '相关度', value: 0 },
    { text: '最多播放', value: 1 },
    { text: '最新上传', value: 2 },
];
const option2 = [
    { text: '全部', value: 'a' },
    { text: '免费', value: '6' },
    { text: '付费', value: '4' },
];


// const switch1 = ref(false);
// const switch2 = ref(false);
const itemRef = ref(null);
// const menuRef = ref(null);
// const onConfirm = () => {
//     // itemRef.value.toggle();
//     // 或者
//     // menuRef.value.close();
// };

// beforeCreate() {
//     tags.value = ref(albumViews.albums[0].tags.split(','))
// }

</script>

<style scoped lang="scss">
:deep(.van-popup.van-popup--top.van-dropdown-item__content) {

    display: flex;
    flex-wrap: wrap;
}

:deep(.van-cell.van-cell--center) {
    margin: 10px 10px;
    background-color: #eee;
    border-radius: 5px;
    height: 30px !important;
}

:deep(.van-cell__title) {
    font-size: 13px;
    margin: 0;
}

.scrollbar-demo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
}
</style>